<template>
  <div>
    <el-dialog
      :title="title"
      :visible="dialog"
      width="30%"
      @close="close"
    >
      <slot name="main"></slot>
      <span slot="footer" class="dialog-footer">
        <el-button class="btn2" @click="close">取 消</el-button>
        <el-button type="primary" class="btn" @click="create">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
export default {
  components: {},
  props: {
    dialog: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: ''
    }
  },
  data() {
    return {
    }
  },

  methods: {
    open() {
      this.$emit('showDialog')
    },
    close() {
      this.$emit('close')
    },
    create() {
      this.$emit('create')
    }
  }
}
</script>
<style lang='scss' scoped>
.button{
  display: flex;
}
::v-deep .el-dialog__title{
  color: #333 ;
  font-size: 16px;
  font-weight: 600;
}
 ::v-deep .el-dialog,::v-deep .el-dialog__header{
  background: #fff !important;
  border-radius: 10px !important;
  width: 630px !important;
}
::v-deep .el-dialog__header .el-icon-close:before{
  color: #333;
}
::v-deep .el-dialog__footer{
  text-align: center;
}
  .btn2{
      justify-content: center;
      align-items: center;
      width: 80px !important;
      height: 36px;
      padding: 0;
      background-color: #fbf4f0;
      border: none;
      color: #655b56 !important;
      margin-right: 34px;
    }
    .btn2:hover {
      background-color: #f3e7e1;
    }
  .btn {
    align-items: center;
    width: 80px!important;
    height: 36px;
    padding: 0;
    background: linear-gradient(135deg,#ff9743,#ff5e20);
    border: none;
    }
    .btn:hover {
      width: 200px;
      background: linear-gradient(135deg, #ff9743, #e20);
    }

</style>
